<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
      body {
        background-color: dimgrey;
      }
      textarea {
        height: 200px;
        width:500px;
      }
      h4 {
        text-align: center;
        margin: 5 0 5 0;
      }
      .right-panel {
        display: inline-block;
        vertical-align: top;
        width:500px;
      }
      .html-snippets {
        display: inherit;
      }
      .selectors {
        display: inherit;
        margin-top: 10px
      }
      .close {
        position:absolute;
        top:0px;
        left:0px;
        width:30px;
        height:30px;
        cursor:pointer;
        background-color: white;
        border-radius: 999px;
        text-align: center;
        text-decoration: none;
        line-height: 30px;
        color: grey;
        border: 2px solid grey;
        font-family: sans-serif;
        font-weight: bold;
      }
      .close:hover {color:red}

    </style>
  </head>
<body>
  <img src="<%= image_url %>" />
  <span class="right-panel">
    <span class="html-snippets">
      <% sizes.each do |size| %>
      <span class="snippet" id="<%= size.key %>">
        <h4><%= size.label %></h4>
        <textarea>&lt;a href="<%= photo_page_url %>" title="<%= CGI.escapeHTML(title) %> by <%= author %>, on Flickr"&gt;&lt;img src="<%= size.url %>" width="<%= size.width %>" height="<%= size.height %>" alt="<%= CGI.escapeHTML(title) %>"&gt;&lt;/a&gt;</textarea>
      </span>
      <% end %>
    </span>

    <span class="selectors">
    <% sizes.each do |size| %>
        <button onclick="script:showId('<%= size.key %>');"><%= size.label %> </button>
    <% end %>
    </span>
  </span>
  <a class="close" href="<%= back_to_index_page %>">X</a>
  <script>
  function hideSnippets() {
    var tags = document.getElementsByClassName('snippet'),
        i = tags.length;
      while(i--)
      {
          tags[i].style.display = "none";
      }
  };

  function showId(id) {
    hideSnippets();
    var section = document.getElementById(id);
    section.style.display = "";
    section.getElementsByTagName("textarea")[0].select();
  };
  <% if sizes["medium_800"].nil? %>
    showId("original");
  <% else %>
    showId("medium_800");
  <% end %>

  // Escape to go back
  document.onkeyup = function(e) {
    e = e || window.event;
    if (e.keyCode == 27) {   // esc
      document.location.href = "<%= back_to_index_page %>";
    };
  };
  </script>
</body>
</html>


